<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Client Side Storages</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Client Side Storages</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>

        <p>
            <a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a>
        </p>
    </div>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="current">Cookies</li>
        <li>userData(IE)</li>
        <li>SharedObject(Flash)</li>
        <li>Frameworks</li>
        <li>HTML5</li>
    </ul>
</div>

<!-- Cookies -->
<div class="slide">
    <h1>Cookies</h1>

    <p>Cookie – это небольшой объем именованных данных, сохраняемых вебброузером и связанных с определенной вебстраницей или вебсайтом</p>

    <ul>
        <li>не более 300 cookies</li>
        <li>20 cookies на один вебсервер</li>
        <li>4 Кбайт для одного cookie</li>
    </ul>

</div>

<div class="slide">
    <h1>Cookies: set</h1>

    <pre class="brush: js">
        document.cookie = "version="
            + encodeURIComponent(document.lastModified);

        document.cookie = "соокiеName=данные
              [; expirеs=строка_времени_СМТ]
              [; path=nyть]
              [; domain=домен]
              [; secure]"
    </pre>
</div>

<div class="slide">
    <h1>Cookies: get</h1>

    <p>document.cookie - список пар имя–значение, разделенных точками с запятой</p>

    <p>Для получения значения cookie с определенным именем могут использо
ваться методы String.indexOf() и String.substring(), а для разбиения строки cook
ieфайла на отдельные составляющие – метод String.split()</p>
</div>

<div class="slide">
    <h1>Cookies: get</h1>

    <pre class="brush: js">
        var allcookies = document.cookie;

        var pos = allcookies.indexOf("version=");
        if (pos != 1) {
            var start = pos + 8; // Начало значения cookie
            var end = allcookies.indexOf(";", start);
            if (end == 1) {
                end = allcookies.length;
            }
        
            var value = allcookies.substring(start, end);
            value = decodeURIComponent(value);
            if (value != document.lastModified) {
                alert("Документ был изменен с момента вашего последнего посещения");
            }
        }
    </pre>
</div>


<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Cookies</li>
        <li class="current">userData(IE)</li>
        <li>SharedObject(Flash)</li>
        <li>Frameworks</li>
        <li>HTML5</li>
    </ul>
</div>

<!-- userData -->
<div class="slide">
    <h1>userData</h1>

    <pre>
        &lt;! Данная таблица стилей определяет класс с именем "persistent" -->
        &lt;style>.persistent { behavior:url(#default#userData);}&lt;/style>
        &lt;! Данный элемент &lt;div> является членом этого класса -->
        &lt;div id="memory" class="persistent">&lt;/div&gt;
    </pre>

    <pre class="brush: js">
        var memory = document.getElementById("memory");
        memory.style.behavior = "url('#default#userData')";
    </pre>
</div>

<div class="slide">
    <h1>userData</h1>

    <pre class="brush: js">
        var memory = document.getElementById("memory");

        // сохраняющий данные
        memory.setAttribute("username", username);
        memory.setAttribute("favoriteColor", favoriteColor);
        memory.save("myPersistentData");

        // Прочитать данные по имени
        memory.load("myPersistentData");
        var user = memory.getAttribute("username");
        var color = memory.getAttribute("favoriteColor");
    </pre>
</div>

<div class="slide">
    <h1>userData</h1>

    <pre class="brush: js">
        var memory = document.getElementById("memory");

        // сохраняющий данные
        var doc = memory.XMLDocument;
        var root = doc.documentElement;
        root.appendChild(doc.createTextNode("data here"));
    </pre>
</div>

<div class="slide">
    <h1>userData</h1>

    <ul>
        <li>Каждая страница может сохранить до 64 Кбайт.</li>
        <li>Каждый вебсервер – до 640 Кбайт</li>
        <li>...</li>
    </ul>
</div>


<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Cookies</li>
        <li class="done">userData(IE)</li>
        <li class="current">SharedObject(Flash)</li>
        <li>Frameworks</li>
        <li>HTML5</li>
    </ul>
</div>

<!-- SharedObject -->
<div class="slide">
    <h1>SharedObject</h1>

    <p></p>
</div>

<div class="slide">
    <h1>SharedObject</h1>

    <pre class="brush: js">
        var so = SharedObject.getLocal("myPersistentData");

        var name = so.data.username; // Прочитать сохраненные ранее данные
        so.data.favoriteColor = "red"; // Записать сохраняемые данные

        so.flush();
    </pre>
</div>

<div class="slide">
    <h1>SharedObject</h1>

    <ul>
        <li>до 100 Кбайт данных с одного вебсайта</li>
        <li>Пользователь может менять это значение в пределах от 10 Кбайт до 10 Мбайт</li>
        <li>Пользователь может снять ограничение или полностью запретить возможность сохранения данных.</li>
    </ul>
</div>


<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Cookies</li>
        <li class="done">userData(IE)</li>
        <li class="done">SharedObject(Flash)</li>
        <li class="current">Frameworks</li>
        <li>HTML5</li>
    </ul>
</div>

<!-- Frameworks -->
<div class="slide">
    <h1>Frameworks</h1>

    <ul>
        <li>jStorage</li>
        <li>PersistJS</li>
        <li>Store.js</li>
        <li>...</li>
    </ul>
</div>

<div class="slide">
    <h1>jStorage</h1>

    <pre class="brush: js">
        $.jStorage.storageAvailable()
        
        $.jStorage.set(key, value)
        $.jStorage.set("mykey", "keyvalue");
        $.jStorage.setTTL("mykey", 3000); // expires in 3 seconds
        $.jStorage.flush()

        value = $.jStorage.get(key)
        value = $.jStorage.get(key, "default value")

        $.jStorage.index();
    </pre>
</div>


<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Cookies</li>
        <li class="done">userData(IE)</li>
        <li class="done">SharedObject(Flash)</li>
        <li class="done">Frameworks</li>
        <li class="current">HTML5</li>
    </ul>
</div>

<!-- HTML5 -->
<div class="slide">
    <h1>HTML5</h1>

    <ul>
        <li>localStorage</li>
        <li>Web SQL</li>
        <li>IndexedDB</li>
    </ul>
</div>

<div class="slide">
    <h1>localStorage</h1>

    <pre class="brush: js">
        // Store value on the browser beyond the duration of the session
        localStorage.setItem('key', 'value');
         
        // Retrieve value (works even after closing and re-opening the browser)
        alert(localStorage.getItem('key'));
    </pre>

    <p>Only strings can be stored via the Storage API</p>
</div>

<div class="slide">
    <h1>Web SQL</h1>

    <pre class="brush: js">
        db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);
        if(db){
            db.transaction(function(tx) {
                tx.executeSql(
                    "SELECT COUNT(*) FROM ToDo", // query
                    [],                          // params
                    function(result){},          // onSuccess
                    function(tx, error){});      // onError
            });

            
        } else {
            alert("Failed to connect to database.");
        }
    </pre>
</div>

<div class="slide">
    <h1>Web SQL</h1>

    <pre class="brush: js">
        // insert
        db.transaction(function(tx) {
            tx.executeSql(
                "INSERT INTO ToDo (label, timestamp) values(?, ?)",
                ["Купить iPad или HP Slate", new Date().getTime()], null, null);
        });

        // reading results
        db.transaction(function(tx) {
            tx.executeSql(
                "SELECT * FROM ToDo",
                [],
                function(tx, result) {
                    for(var i = 0; i < result.rows.length; i++) {
                        console.log(result.rows.item(i)['label']);
                    }
                }, null)
        });
    </pre>
</div>

<div class="slide">
    <h1>IndexedDB</h1>

    <p>IndexedDB служит для хранения больших объемов структурированных данных, с возможностью индексации.</p>

    <pre class="brush: js">
        var t=idb.transaction(['chat'],idbConst.READ);
        var s=t.objectStore('chat');
        var r=s.openCursor();
        r.onsuccess = function (e) {
            var idbEntry=e.target.result;
            if (idbEntry){
                //делаем, что нам нужно и читаем дальше
                idbEntry.continue();
            } else {
                //данные закончились
            };
        };
    </pre>
</div>

<div class="slide">
    <h1>Вопросы / Предложения</h1>

    <ul>
        <li>Alex.Kolonitsky@gmail.com</li>
        <li>akolonitsky@exadel.com</li>
        <li>Skype: Desargues_</li>
        <li>http://code.google.com/p/javascript-learning-courses/issues/list</li>
    </ul>
</div>

</body>
</html>

